<template>
  <div class="videoPlay">
    <video ref="m3u8_video" class="video-js vjs-default-skin vjs-big-play-centered" controls>
      <source :src="videoSrc" />
    </video>
  </div>
</template>
<script setup>
import { nextTick, onBeforeUnmount, toRefs, onMounted, ref, watch, defineProps, defineExpose } from "vue"
import videojs from "video.js"
import "video.js/dist/video-js.css"
import zh from "video.js/dist/lang/zh-CN.json"
import { useCounterStore } from '@/stores/counter.js'
// let MutePinia = useCounterStore()
const props = defineProps({
  indexData: Number,
  videoSrc: String,
  autoPlay: Boolean,
})
let { indexData, videoSrc } = toRefs(props)
let MutePinia = ref(true)
console.log(props)
const m3u8_video = ref()
let player = ''
const initPlay = async (data) => {
  videojs.addLanguage("zh-CN", zh)
  await nextTick()
  const options = {
    muted: data,
    controls: true,
    autoplay: true,
    loop: true,
    language: "zh-CN",
    techOrder: ["html5"],
  }
  player = videojs(m3u8_video.value, options, () => {
    if (props.videoSrc) {
      player.play()
      player.muted(data)
    }
    player.on("ended", () => {
    })
    player.on("error", () => {
    })
  })
}
defineExpose({ initPlay, videoSrc, indexData })
onMounted(() => {
  initPlay(true)
})
//直接改变路径测试
watch(
  () => props.videoSrc,
  () => {
    player.pause()
    player.src(props.videoSrc)
    player.load()
    if (props.videoSrc) {
      player.play()
    }
  }
)
onBeforeUnmount(() => {
  player?.dispose()
});
</script>
<style lang="scss" scoped>
.videoPlay {
  width: 100%;
  height: 100%;
  .video-js {
    height: 100%;
    width: 100%;
    object-fit: fill;
  }
}

:deep(.vjs-tech) {
  object-fit: fill;
}
/* 隐藏Video.js控制栏 */
:deep.video-js .vjs-control-bar {
  display: none;
}
</style>
   
